import React, { useEffect, useRef, useState } from "react";

const EffectComponent = () => {
  const [selectValue, setSelectValue] = useState<string>("0");

  // useEffect函数用来加载数据，会在reder之后执行
  // 1, 一个回调函数：如果页面渲染就会加载
  // 2, 两个参数第二个空数组： 只会执行一遍
  // 3, 两个参数第二个数组有值： 会依赖数组里面的变量，如果标量改变则会执行
  useEffect(() => {
    console.log("print------->", selectValue);
  }, [selectValue]);

  return (
    <div>
      <select
        value={selectValue}
        onChange={(event) => {
          setSelectValue(event.target.value);
        }}
        className="form-select"
        aria-label="Default select example"
      >
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
  );
};

export default EffectComponent;
